<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>微信导航栏</title>
	<style> 
		body {
			background: url(images/wx.jpg) repeat-x;
		}

		* {
			margin: 0;
			padding: 0;
		}

		li {
			list-style: none;
		}

		.nav {
			float: right;
			margin: 20px;

		}

		.nav a {
			display: inline-block;
			height: 33px;
			background: url(images/to.png) no-repeat;
			padding-left: 15px;
			color: #fff;
			line-height: 33px;
		}

		.nav li {
			/*display: inline-block;*/
			/* 用浮动中间没空隙 */
			float: left;
			margin: 0 5px;
		}

		.nav span {
			display: inline-block;
			height: 33px;
			background: url(images/to.png) right top no-repeat;
			padding-right: 15px;	
		}
		
		/* 一个换左侧，一个换右侧，都要换 */
		.nav a:hover,
		.nav a:hover span {
			background-image: url(images/ao.png);
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li><a href="#"><span>首页</span></a></li>
			<li><a href="#"><span>帮助与反馈</span></a></li>
			<li><a href="#"><span>公众平台</span></a></li>
			<li><a href="#"><span>开放平台</span></a></li>
			<li><a href="#"><span>按时</span></a></li>
			<li><a href="#"><span>a</span></a></li>
		</ul>
	</div>
</body>
</html>